<template>
  <div class="summaryReport">
    <el-card class="box-card">
      <el-form>
        <el-form-item>
          <el-input
            placeholder="员工姓名"
            v-model="queryData.name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="业务线名称"
            v-model="queryData.businessName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="项目名称"
            v-model="queryData.projectName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryData.startPrintingDate"
            type="month"
            placeholder="日期开始时间(年月)"
          >
          </el-date-picker>
          <el-date-picker
            v-model="queryData.closePrintingDate"
            type="month"
            placeholder="日期结束时间(年月)"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-select
            v-model="queryData.stationName"
            placeholder="岗位"
            clearable
          >
            <el-option
              v-for="item in postList"
              :key="item.id"
              :label="item.stationName"
              :value="item.stationName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="hanlerSearch">查询</el-button>
          <el-button type="warning" @click="exportTable">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <el-table
        :data="formList"
        v-loading="loading"
        border
        style="width: 100%"
        id="table-list"
      >
        <el-table-column
          prop="businessName"
          width="130px"
          label="所属业务线"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="projectName"
          width="140px"
          label="所属项目"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="name" align="center" label="员工姓名">
        </el-table-column>
        <el-table-column
          prop="stationName"
          align="center"
          width="130px"
          label="岗位"
        >
        </el-table-column>
        <el-table-column
          prop="inTime"
          align="center"
          width="155px"
          label="入项时间"
        >
        </el-table-column>
        <el-table-column
          prop="beforeTime"
          align="center"
          width="155px"
          label="离项时间"
        >
        </el-table-column>
        <el-table-column prop="clockIn" align="center" label="打卡月份(年月)">
        </el-table-column>
        <el-table-column prop="attendanceDay" align="center" label="应出勤天数">
        </el-table-column>
        <el-table-column
          prop="workdayAddedHours"
          align="center"
          label="工作日加班工时/h"
        >
        </el-table-column>
        <el-table-column
          prop="holidaysAddedHours"
          align="center"
          label="节假日加班工时/h"
        >
        </el-table-column>
        <el-table-column prop="leaveDays" align="center" label="调休天数">
        </el-table-column>
        <el-table-column
          prop="actualAttendanceDays"
          align="center"
          label="实际出勤天数"
        >
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handlerOpenParticulars(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        :page.sync="queryData.pageNum"
        :limit.sync="queryData.pageSize"
        @pagination="getList"
      />
    </el-card>
    <Particulars
      :dayList="dayList"
      :stateList="stateList"
      :particularsDialogVisible="particularsDialogVisible"
      @cancel="cancel"
      @determine="determine"
    />
  </div>
</template>
<script>
import { select } from "../../../api/statement";
import { getPost } from "../../../api/staff";
import Pagination from "../../../components/Pagination";
import Particulars from "./components/particulars.vue";
import axios from 'axios'
export default {
  components: {
    Particulars,
    Pagination,
  },
  data() {
    return {
      postList: [],
      dayList: [],
      stateList: [],
      particularsDialogVisible: false,
      region: "",
      formList: [],
      loading: true,
      total: 0,
      queryData: {
        pageNum: 1, //当前显示多少数据
        pageSize: 8, // 当前页
        businessName: "", //业务线名称
        closePrintingDate: "", //打卡日期结束时间
        name: "", //员工名称
        projectName: "", //项目名称
        startPrintingDate: "", //打卡日期开始时间
        stationName: "", //岗位名称
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取数据
    getList() {
      select(this.queryData).then((res) => {
        if (res.status === 200) {
          this.loading = false;
          this.total = res.data.total; //总条数
          this.queryData.pageNum = res.data.current; //当前页
          this.queryData.pageSize = res.data.size; //每页显示条数
          this.formList = res.data.records;
        }
      });
      getPost().then((res) => {
        this.postList = res.data;
      });
    },
    // 查询按钮
    hanlerSearch() {
      this.getList();
    },
    // 打卡详情弹窗按钮
    handlerOpenParticulars(rows) {
      this.particularsDialogVisible = true;
      this.dayList = rows.daysList;
      this.stateList = rows.stateList;
      console.log(this.stateList);
    },
    // 详情取消按钮
    cancel(valFalse) {
      this.particularsDialogVisible = valFalse;
    },
    // 详情确认按钮
    determine(valFalse) {
      this.particularsDialogVisible = valFalse;
    },
    // 导出按钮
    exportTable() {
      axios({
          url:'http://ebzefy.natappfree.cc/spring/excel/collectExport',
          method:'get',
          responseType: 'blob'
        })
        .then((response) => {
          console.log(response);
          if (!response || !response.data) {
            return;
          }
          let blob = new Blob([response.data]); //response.data为后端传的流文件
          let downloadFilename = "汇总报表.xlsx"; //设置导出的文件名
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
            //兼容ie浏览器
            window.navigator.msSaveOrOpenBlob(blob, downloadFilename);
          } else {
            //谷歌,火狐等浏览器
            let url = window.URL.createObjectURL(blob);
            let downloadElement = document.createElement("a");
            downloadElement.style.display = "none";
            downloadElement.href = url;
            downloadElement.download = downloadFilename;
            document.body.appendChild(downloadElement);
            downloadElement.click();
            document.body.removeChild(downloadElement);
            window.URL.revokeObjectURL(url);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-card {
  margin: 20px;
}
.el-input {
  width: 250px;
}
.el-form {
  display: flex;
  justify-content: space-evenly;
}
</style>
